<div class="layui-container">
    <div class="layui-row kt-user-body">
        <div class="layui-col-md12">
            <ul class="kt-location">

                <li>
                    <a href="javascript:;" class="kt-back">
                        <span class="iconfont icon-siglypharrowbackward"></span>
                        返回上一页
                    </a>
                </li>

                <li>
                    <a href="#/html/views/index.html">首页</a><img src="/html/images/location_bg.png">
                </li>

                <li class="active">
                    <a href="javascript:;">个人中心</a>
                    <img src="/html/images/location_bg.png">
                </li>

                <div class="kt-clear"></div>
            </ul>
        </div>

        <div class="layui-col-md4 kt-body-left">
            <div class="kt-usercenter-left">
                <img src="/html/images/userbg.jpg" alt="" class="kt-userbg">

                <div class="kt-userinfo">
                    <div class="title">
                        <div class="kt-badge">

                            <i class="layui-icon layui-icon-rate-solid"></i>
                            <span> 基本信息</span>
                        </div>

                        <div class="kt-setting">
                            <span class="iconfont icon-shezhi3"></span>
                            <span class="iconfont icon-shezhi2"></span>
                        </div>
                    </div>

                    <div class="kt-user-info">
                        <div class="kt-headpic">
                            <img src="/html/images/headpic.jpg" alt="">

                            <a href="javascript:;" class="kt-guanzhu" title="万水千山总是情，给个关注行不行？">
                                <div class="guanzhu-bg"></div>
                                <span class="iconfont icon-tianjia"></span>
                            </a>
                        </div>
                        <div class="kt-nickname">
                            <p>看上隔壁小花了啦</p>
                            <p>@看上隔壁小花了啦</p>
                        </div>
                    </div>

                    <div class="kt-user-other">
                        <div>
                            <div class="layui-row kt-user-other-top">
                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                    <p>攻略</p>
                                    <p>208</p>
                                </div>
                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                    <p>关注</p>
                                    <p>208</p>
                                </div>
                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                    <p>学习</p>
                                    <p>208</p>
                                </div>

                                <div class="kt-clear"></div>
                            </div>

                            <p class="kt-user-des">
                                "此人不漏锋芒？其实就是懒！"
                            </p>

                            <div class="kt-user-photos">
                                <table>
                                    <tr>
                                        <td>来自</td>
                                        <td>：</td>
                                        <td>安徽 合肥</td>
                                    </tr>
                                    <tr>
                                        <td>诞辰</td>
                                        <td>：</td>
                                        <td>1997-05-08</td>
                                    </tr>
                                    <tr>
                                        <td>时光流影</td>
                                        <td colspan="2">：</td>
                                    </tr>
                                    <tr>
                                        <td colspan="3">
                                            <div class="layui-row" id="kt-user-photo">
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img01.jpg" src="/html/images/news/img01.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" alt="">
                                                    </div>

                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img02.jpg" src="/html/images/news/img02.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" alt="">
                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img03.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" alt="">
                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img04.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" alt="">
                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img05.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" alt="">

                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img06.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" width="100%" alt="">
                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img07.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" width="100%" alt="">
                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img08.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" width="100%" alt="">
                                                    </div>
                                                </div>
                                                <div class="layui-col-md4 layui-col-sm4 layui-col-xs4">
                                                    <div>
                                                        <img lay-src="/html/images/news/img03.jpg" src="/html/images/news/img09.jpg" onload="KtImgLoad(this)" onerror="KtImgError(this);" width="100%" alt="">
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md8">
            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                <ul class="layui-tab-title">
                    <li class="layui-this" kt-tab-url="#/html/tpl/user_center/article.tpl">
                        <span class="iconfont icon-dengpao"></span>
                        <span>Ta的攻略</span>
                    </li>

                    <li kt-tab-url="#/html/tpl/user_center/photos.tpl">
                        <span class="iconfont icon-tupiancopy"></span>
                        <span>时光留影</span>
                    </li>
                    <li kt-tab-url="#/html/tpl/user_center/growup.tpl">
                        <span class="iconfont icon-tubiaozhizuomoban"></span>
                        <span>成长历程</span>
                    </li>
                    <li kt-tab-url="#/html/tpl/user_center/follow.tpl">
                        <span class="iconfont icon-iconyiguanzhu"></span>
                        <span>最近关注</span>
                    </li>
                </ul>

                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show"></div>

                    <div class="layui-tab-item"></div>

                    <div class="layui-tab-item"></div>

                    <div class="layui-tab-item"></div>

                </div>
            </div>
        </div>

        <div class="kt-clear"></div>
    </div>
</div>

<script>
    layui.config({
        base: 'js/'
    }).use([
        'jquery',
        'element',
        'fun'
    ], function () {
        var $ = layui.jquery;
        var element = layui.element;
        var fun = layui.fun;

        // 用户中心关注按钮
        $(document).on('click','.kt-guanzhu',function(){
            if( $(this).hasClass('active') ){

                // 取消关注
                $(this).find('.iconfont').addClass('icon-tianjia');
                $(this).find('.iconfont').removeClass('icon-wanchengduigouxpx-');

                $(this).removeClass('active');
            }else{

                // 设置关注
                $(this).find('.iconfont').removeClass('icon-tianjia');
                $(this).find('.iconfont').addClass('icon-wanchengduigouxpx-');

                $(this).addClass('active');
            }
        });

        // 选项卡渲染
        element.render("docDemoTabBrief");

        var url = $('.layui-tab[lay-filter="docDemoTabBrief"]').find('li.layui-this').attr('kt-tab-url');

        fun.getTpl(url.replace('#', ''), function(html) {
            $('.layui-tab[lay-filter="docDemoTabBrief"]').find('.layui-show').append(html);
        });

        // 监听选项卡切换
        element.on('tab(docDemoTabBrief)', function(data){

            var thisObj = $(this);

            // 获取当前选项卡内容
            var url = thisObj.attr('kt-tab-url');
            var nowhtml = thisObj.parent('.layui-tab-title').siblings('.layui-tab-content').children('.layui-tab-item').eq(data.index).html();

            // 如果内容为空则获取模板
            if( nowhtml == '' ){
                fun.getTpl(url.replace('#', ''), function(html) {
                    thisObj.parent('.layui-tab-title').siblings('.layui-tab-content').children('.layui-tab-item').eq(data.index).append(html);
                });
            }

        });

        // 用户中心设置按钮点击
        $(document).find('.kt-setting').unbind('click').click(function(){

            fun.getTpl('/html/tpl/user_center/user-setting.tpl', function (data) {

                // 设置弹框大小
                if($(document).width() > 760){
                    width = '800px';
                    height = '650px';
                }else{
                    width = '90%';
                    height = '470px';
                }

                // 加载模板
                userSetting = layer.open({
                    type: 1,
                    anim: 1,
                    title: '<span class="iconfont icon-shezhi1"></span> <b>改变从设置开始</b>',
                    area: [width,height],
                    content: '<div style="box-sizing: border-box;width:100%;height: 100%;">'+data+'</div>',
                    end: function(){
                        layer.closeAll('tips');
                    }
                });

            });
        });

        // 用户相册
        layer.photos({
            photos: '#kt-user-photo'
            ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            ,tab: function(pic, layero){
                console.log(pic) //当前图片的一些信息
            }
        });


    });
</script>
